<template>
	<view class="wrapper">
		<view class="list">
			<view @click="jumpPage(item)" class="list-item" v-for="item in list" :key="item.id">
				<view class="list-item-top">
					<view class="list-item-top-title">
						{{ item.title }}
					</view>
					<view class="list-item-top-time">
						{{ item.time }}
					</view>
				</view>
				<view class="list-item-content">
					{{ item.content }}
				</view>
				<view class="list-item-line"></view>
				<view class="list-item-footer">
					<view class="list-item-footer-name">
						查看详情
					</view>
					<u-icon name="arrow-right" color="#333333" size="28rpx"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					title: '标题通知文案最多',
					time: '2025-06-09 10:36',
					content: '您提交的新昵称正在审核中，审核结果可在24小时后通过 消息中心查看。'
				},
				{
					id: 2,
					title: '标题通知文案最多',
					time: '2025-06-09 10:36',
					content: '您提交的新昵称正在审核中，审核结果可在24小时后通过 消息中心查看。'
				},
				{
					id: 3,
					title: '标题通知文案最多',
					time: '2025-06-09 10:36',
					content: '您提交的新昵称正在审核中，审核结果可在24小时后通过 消息中心查看。'
				}
			]
		};
	},
	methods: {
		jumpPage(item){
			uni.navigateTo({
				url:'/package-purse/announcementDetails/announcementDetails'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 20rpx 30rpx;
}
.list{
	&-item{
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 35rpx 30rpx 20rpx;
		margin-bottom: 20rpx;
		&-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-title{
				font-family: 'PingFang SC';
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			&-time{
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
		&-content{
			margin: 28rpx 0 31rpx 0;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
		&-line{
			height: 2rpx;
			background: #FAFAFA;
			border-radius: 1rpx;
		}
		&-footer{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-name{
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
}
</style>
